import IconMap from "@/components/IconMap";
import { Button, Pagination, Space } from "antd";
import { CollapseContext } from "@/layouts/BasicLayout";
import { FC, useContext } from "react";
import { cn } from "@/utils/twMerge";

type PropsType = {
  addHandle: () => void;
  deleteHandle: () => void;
  onChangePageSize: (current: number, pageSize: number) => void;
  current: number;
  pageSize: number;
  total: number;
};

const HeaderTool: FC<PropsType> = ({
  addHandle,
  deleteHandle,
  onChangePageSize,
  current,
  total,
  pageSize,
}) => {
  const collapse = useContext(CollapseContext);
  //   console.log(collapse);
  return (
    <div
      className={cn(
        "fixed top-0 left-0 w-full h-16 flex items-center z-20  px-48 pl-[11rem] pointer-events-none transition-all",
        !collapse && "!pl-[22rem]"
      )}
    >
      <div className="flex w-full justify-between items-center pointer-events-auto">
        <Space>
          <Button
            icon={IconMap.PlusOutlined}
            shape="round"
            size="small"
            onClick={addHandle}
          >
            创建
          </Button>
          <Button
            danger
            icon={IconMap.DeleteOutlined}
            shape="round"
            size="small"
            onClick={deleteHandle}
          >
            批量删除
          </Button>
        </Space>

        <Space>
          <Pagination
            defaultCurrent={current}
            total={total}
            pageSize={pageSize}
            onChange={onChangePageSize}
            size="small"
            simple
          />
          <span className="text-sm text-nowrap md:block hidden">
            共计{total}条记录
          </span>
        </Space>
      </div>
    </div>
  );
};

export default HeaderTool;
